<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true"><i class="el-icon-plus"></i>上传</el-button>

    <el-dialog title="基于人工智能的语音识别系统" :visible.sync="dialogTableVisible">
        <el-form :model="form">
            <el-form-item label="语音编号" :label-width="formLabelWidth">
                <el-input v-model="form.voiceNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上传语音包" :label-width="formLabelWidth">
                <el-upload
                        class="upload-demo"
                        action="/upload"
                        name="picFile"
                        :on-success="handleSuccess"
                        :on-error="handleError">
                    <el-button size="small" type="primary">点击上传音频文件</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="语音包大小" :label-width="formLabelWidth">
                <el-input v-model="form.voiceSize" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="语音名" :label-width="formLabelWidth">
                <el-input v-model="form.voiceName" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">关闭</el-button>
            <el-button type="primary" @click="dialogTableVisible1">保存</el-button>
        </div>
    </el-dialog>

    <!-- Form -->
    <el-button type="text" @click="dialogFormVisible = true"><i class="el-icon-refresh-right"></i>修改</el-button>

    <el-dialog title="基于人工智能的语音识别系统" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="语音编号" :label-width="formLabelWidth">
                <el-input v-model="form.voiceNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="修改语音包" :label-width="formLabelWidth">
                <el-upload
                        class="upload-demo"
                        action="/upload"
                        name="picFile"
                        :on-success="handleSuccess"
                        :on-error="handleError">
                    <el-button size="small" type="primary">修改音频文件</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="语音包大小" :label-width="formLabelWidth">
                <el-input v-model="form.voiceSize" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="语音名" :label-width="formLabelWidth">
                <el-input v-model="form.voiceName" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">关闭</el-button>
            <el-button type="primary" @click="dialogFormVisible2">保存</el-button>
        </div>
    </el-dialog>

    <!-- Form -->
    <el-button type="text" @click="diaFormVisible4"><i class="el-icon-close"></i>删除</el-button>


    <template>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type='selection'
                    label="全选"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="id"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="voiceNumber"
                    label="语音编号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="uploadTime"
                    label="上传时间"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="voiceSize"
                    label="语音包大小"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="voiceName"
                    label="语音名"
                    show-overflow-tooltip>
            </el-table-column>
        </el-table>
        <el-button type="success" @click="limit2">上一页</el-button>
        <el-button type="success" @click="limit1">下一页</el-button>
    </template>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入axios和vue框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                gridData: [],
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    id: '',
                    voiceNumber: '',
                    voicePackage: '',
                    voiceSize: '',
                    voiceName: ''
                },
                formLabelWidth: '120px',

                tableData: [],
                multipleSelection: [],
                page: 0,
                pageSize: 5
            }
        },
        methods: {
            handleSuccess(response, file) {
                console.log('上传成功', response, file);
                v.form.voicePackage = file.response.filterName; //把文件包放在指定的路径中
                v.form.voiceSize = file.response.size; //把文件包大小展示在前端
            },
            handleError(error, file) {
                console.error('上传失败', error, file);
            },
            diaFormVisible4() {
                console.log(this.tableData);
                let url = 'http://localhost:9075/voices/delete'
                console.log('url=' + url);
                axios.post(url, this.multipleSelection).then(function (response) {
                    let responseBody = response.data;
                    if (responseBody.state == 20000) {
                        v.$message({
                            message: "删除成功",
                            type: "success"
                        });
                        v.dialogFormVisible3();//删除成功自动刷新
                    }
                })
            },
            dialogFormVisible3() {
                let url = 'http://localhost:9075/voices/list'
                console.log('url=' + url);
                axios.get(url, this.form).then(function (response) {
                    let responseBody = response.data;
                    v.tableData = responseBody.data;
                    console.log(responseBody.data);
                })
            },
            dialogFormVisible2() {
                let url = 'http://localhost:9075/voices/' + v.form.voiceNumber + '/update'
                console.log('url=' + url);
                axios.post(url, this.form).then(function (response) {
                    let responseBody = response.data;
                    if (responseBody.state == 20000) {
                        v.$message({
                            message: "更新成功",
                            type: "success"
                        });
                        v.dialogFormVisible3();//更新成功自动刷新
                        v.dialogFormVisible  = false;
                    }
                })
            },
            dialogTableVisible1() {
                let url = 'http://localhost:9075/voices/add-new'
                console.log('url=' + url);
                axios.post(url, this.form).then(function (response) {
                    let responseBody = response.data;
                    if (responseBody.state == 20000) {
                        v.$message({
                            message: "上传成功",
                            type: "success"
                        });
                        v.dialogFormVisible3();//更新成功自动刷新
                        v.dialogTableVisible = false;

                    }
                })
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = []
                val.forEach(item => {
                    const id = item.id
                    // 判断数组中是否包含这个 id
                    if (this.multipleSelection.indexOf(id) == -1) {
                        this.multipleSelection.push(id)
                    }
                })
                console.log(this.multipleSelection);
            },
            limit2() {
                this.page=this.page-1;
                let url = "http://localhost:9075/voices/page?page=" + this.page + "&pageSize=" + this.pageSize;
                console.log(url)
                axios.get(url).then(function (response) {
                    let responseBody = response.data;
                    let data=responseBody.data.list;
                    console.log(data);
                    console.log(data.length)
                    if (data==0){
                        v.page=v.page-1;
                        return;
                    }
                    v.tableData=data
                })
            },
            limit1() {
                this.page=this.page+1;
                let url = "http://localhost:9075/voices/page?page=" + this.page + "&pageSize=" + this.pageSize;
                console.log(url)
                axios.get(url).then(function (response) {
                    let responseBody = response.data;
                    let data=responseBody.data.list;
                    console.log(data);
                    console.log(data.length)
                    if (data==0){
                        v.page=v.page-1;
                        return;
                    }
                    v.tableData=data
                })
            },

        },
        created() {
            this.limit1();
        }
    })


</script>
</html>